<template>
  <div class="custome-table">
    <el-form>
      <div class="table-title">水污染源自动检测仪较准记录表</div>
      <!-- row1 -->
      <div class="table-row-item">
        <div class="table-row-item">
          <div class="item-label">维护管理单位</div>
          <div class="item-value">{{ form.key1 }}</div>
        </div>
        <div class="table-row-item">
          <div class="item-label">企业名称</div>
          <div class="item-value">{{ form.enterpriseName }}</div>
        </div>
      </div>
      <!-- row2 -->
      <div class="table-row-item">
        <div class="table-row-item">
          <div class="item-label">排放口名称</div>
          <div class="item-value">{{ form.outletName }}</div>
        </div>
        <div class="table-row-item">
          <div class="item-label">运维结果</div>
          <div class="item-value">
            <el-select v-model="form.key4" :disabled="detail" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.codeName"
                :value="item.code"
              />
            </el-select>
          </div>
        </div>
      </div>
      <!-- row3 -->
      <div class="table-row-item">
        <div class="table-row-item">
          <div class="item-label">填报时间</div>
          <div class="item-value">
            <el-date-picker
              v-model="form.key5"
              type="datetime"
              placeholder="选择填报时间"
            />
          </div>
        </div>
        <div class="table-row-item">
          <div class="item-label">填报人</div>
          <div class="item-value">{{ form.key6 }}</div>
        </div>
      </div>
      <!-- row4 -->
      <div class="table-row-item">
        <div class="table-row-item">
          <div class="item-label">签到时间</div>
          <div class="item-value">
            <el-date-picker
              v-model="form.key7"
              type="datetime"
              placeholder="选择签到时间"
            />
          </div>
        </div>
        <div table-row-item />
      </div>

      <div class="custom-table">
        <table>
          <tr>
            <th width="100">仪器</th>
            <th colspan="2">
              <el-input v-model="form.key8" :disabled="detail" />
            </th>
            <th>型号</th>
            <th colspan="3">
              <el-input v-model="form.key9" :disabled="detail" />
            </th>
          </tr>
          <tr>
            <td rowspan="4" class="text-center">常规项</td>
            <td>校验前各参数</td>
            <td>是否正常</td>
            <td>异常参数</td>
            <td>校验后各参数</td>
            <td>是否正常</td>
            <td>异常参数</td>
          </tr>
          <tr v-for="(item,index) in form.tableList" :key="'tableRow_'+index">
            <td><el-input v-model="item['key'+(index*6+1)]" :disabled="detail" /></td>
            <td>
              <el-select v-model="item['key'+(index*6+2)]" :disabled="detail" placeholder="">
                <el-option
                  v-for="(yn,idx) in yesNoList"
                  :key="'select'+index+'_'+idx"
                  :label="yn.label"
                  :value="yn.value"
                />
              </el-select>
            </td>
            <td><el-input v-model="item['key'+(index*6+3)]" :disabled="detail" /></td>
            <td><el-input v-model="item['key'+(index*6+4)]" :disabled="detail" /></td>
            <td>
              <el-select v-model="item['key'+(index*6+5)]" :disabled="detail" placeholder="">
                <el-option
                  v-for="(yn,idx) in yesNoList"
                  :key="'select'+index+'_'+idx"
                  :label="yn.label"
                  :value="yn.value"
                />
              </el-select>
            </td>
            <td><el-input v-model="item['key'+(index*6+6)]" :disabled="detail" /></td>
          </tr>
          <tr>
            <td class="text-center">记事</td>
            <td colspan="6">
              <el-input v-model="form.key10" :disabled="detail" type="textarea" />
            </td>
          </tr>
        </table>
        <table style="margin-top: 20px;">
          <tr>
            <td width="150">
              上传文件：图片
            </td>
            <td colspan="6">
              <TableUpLoadFile ref="tableUploadFile" :files-list="filePath" :detail="detail" />
            </td>
          </tr>
          <tr>
            <td width="150">
              上传文件：视频
            </td>
            <td colspan="6">
              <TableUpLoadVideo ref="tableUploadVideo" :video-list="videoPath" :detail="detail" />
            </td>
          </tr>
        </table>
      </div>
    </el-form>

  </div>
</template>

<script>
import { getDict } from '@/utils/dict'
import { fileUrl, staticImgUrl } from '@/url'
import TableUpLoadFile from './../TableUpLoadFile'
import TableUpLoadVideo from './../TableUpLoadVideo'
export default {
  name: 'Jz',
  components: {
    TableUpLoadFile,
    TableUpLoadVideo
  },
  props: {
    obj: {
      type: Object,
      default: null
    },
    maintenaIndex: {
      type: Number,
      default: 0
    },
    detail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imagePreview: false,
      videoLoadingFlag: false,
      imgLoadingFlag: false,
      typeList: [],
      fileUrl, staticImgUrl,
      yesNoList: [
        { value: '是', label: '是' },
        { value: '否', label: '否' }
      ],
      // 显示的图片数据
      filePath: [],
      showVideoPath: [],
      videoPath: [],
      form: {
        key1: '', enterpriseName: '', outletName: '',
        key4: null, key5: '', key6: '',
        key7: '', key8: '', key9: '',
        key10: '',
        tableList: [
          { key1: '', key2: '是', key3: '', key4: '', key5: '是', key6: '' },
          { key7: '', key8: '是', key9: '', key10: '', key11: '是', key12: '' },
          { key13: '', key14: '是', key15: '', key16: '', key17: '是', key18: '' }
        ]
      }
    }
  },
  created() {
    this.init()
    this.typeList = getDict('e015')
    const infoStr = this.$store.getters.user.info
    if (infoStr) {
      const info = JSON.parse(infoStr)
      this.form.key6 = info.realName
    }
  },
  methods: {
    init() {
      if (this.obj.list) {
        const maintenaData = this.obj.list[this.maintenaIndex]
        if (maintenaData.filePath) {
          this.filePath = JSON.parse(maintenaData.filePath)
        }
        if (maintenaData.videoPath) {
          this.videoPath = JSON.parse(maintenaData.videoPath)
        }
        if (maintenaData.formContent) {
          this.form = JSON.parse(maintenaData.formContent)
        }
        this.form.enterpriseName = this.obj.enterpriseName
        this.form.outletName = this.obj.outletName
      }
    },
    getFormData() {
      return {
        formContent: JSON.stringify(this.form),
        filePath: this.$refs.tableUploadFile ? this.$refs.tableUploadFile.getPaths() : [],
        videoPath: this.$refs.tableUploadVideo ? this.$refs.tableUploadVideo.getPaths() : [],
        maintenaIndex: this.maintenaIndex
      }
    },
    clearData() {
      this.form = {
        key1: '', enterpriseName: '', outletName: '',
        key4: null, key5: '', key6: '',
        key7: '', key8: '', key9: '',
        key10: '',
        tableList: [
          { key1: '', key2: '是', key3: '', key4: '', key5: '是', key6: '' },
          { key7: '', key8: '是', key9: '', key10: '', key11: '是', key12: '' },
          { key13: '', key14: '是', key15: '', key16: '', key17: '是', key18: '' }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
